<template>
	<view class="approve">
		<view class="header">
			<slide-nav-tab-bar @clickitem="clickitem" :actindex="activeitemindex" activeColor="#0091ff!important"
				activeBorder="#0091ff" width="130rpx" :list="typeList" :borderBottom="borderBottom"></slide-nav-tab-bar>
			<view class="headerBox">
				<scroll-view scroll-x="true" :show-scrollbar="false" :enhanced="true">
					<view class="approveStatus">
						<view v-for="(item, index) in statusList" :key="index"
							:class="[statusActive === index ? 'apptop active' : 'apptop']" @click="changeStatus(index)">
							{{ item }}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<tk-screen-scroll :list="typeList" @getActIdx="getActIdx" :active="activeitemindex" :height="84">
			<view class="content">
				<!-- 报障审批列表 -->
				<block v-if="mylist.length > 0 && activeitemID === 6">
					<approveData :listData="mylist" @toPage="toDetail"></approveData>
				</block>
				<!-- 配件申请列表 -->
				<block v-if="mylist.length > 0 && activeitemID === 5">
					<partsList :isMy="true" :hideStatus="[5]" :listData="mylist" :styleSate="true"
						@toPage="toPartApprovalDetail" />
				</block>

				<!-- 资料列表 -->
				<view v-if="mylist.length > 0 && activeitemID === 0">
					<revise-data v-for="(item, index) in mylist" :key="index" :msg="item"></revise-data>
				</view>

				<view v-if="mylist.length > 0 && activeitemID === 7">
					<appeal-list :listData="mylist"></appeal-list>
				</view>
				<!-- 暂无数据 -->
				<view class="emptyData" v-if="mylist.length === 0">暂无数据</view>

				<view v-show="isLoadMore">
					<uni-load-more :status="loadStatus"></uni-load-more>
				</view>
				<view class="bottom"></view>
			</view>
		</tk-screen-scroll>
		<view-top ref="viewTop" :scrollTop="scrollTop" :distance="100"></view-top>
		<previewMedia ref="previewMedia"></previewMedia>
	</view>
</template>

<script>
import { approveList } from '@/apis/approve.js';
import SlideNavTabBar from '@/components/nav-box/nav-box.vue';
import UniLoadMore from '@/components/uni-load-more/uni-load-more';
import ReviseData from './componets/revise-data.vue';
import approveData from '@/components/approve-data/approve-data.vue';
import appealList from '../components/appeal-list/appeal-list.vue';
import partsList from '@/components/partsList/partsList.vue';
import TkScreenScroll from '@/components/tk-screen-scroll/index';
import { myApprovalList } from '@/apis/myApplication.js';
import { partsNewMyList } from '@/apis/parts.js';
import { mapState } from 'vuex';
import viewTop from '@/components/viewTop/viewTop.vue';
import { getAppealQuestion } from '@/apis/appeal.js';
export default {
	components: {
		SlideNavTabBar,
		ReviseData,
		UniLoadMore,
		approveData,
		partsList,
		TkScreenScroll,
		viewTop,
		appealList
	},
	data() {
		return {
			// 滚动距离
			scrollTop: 0,
			activeitemindex: 0,
			typeList: [
				{
					name: '报障审批',
					id: 6,
				},
				{
					name: '资料更改',
					id: 0,
				},
				{
					name: '配件申请',
					id: 5,
				},
				{
					name: '保养申诉',
					id: 7,
				},
				// {name:"补卡申请",id:1},
				// {name:"请假申请",id:2},
				// {name:"调休申请",id:3},
				// {name:"转单申请",id:4},
				// {name:"配件申请",id:5},
			],
			statusList: ['全部', '待处理', '已受理', '未受理', '已撤回'],
			statusActive: 0,
			approveList: [],
			loadStatus: 'loading',
			isLoadMore: false,
			params: {
				current: 1,
				size: 10,
			},
			// 报障审批
			mylist: [],
			// 类型id
			activeitemID: 6,
			// 配件审批处理状态 1未处理 2已处理
			bottomStatus: 1,
			// 待处理数量
			pendingNum: null,
			// 已处理数量
			Processed: null,
			isPending: true,
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	onShow() {
		// this.getList()
		this.mylist = [];
		// this.activeitemindex = 0
		this.statusActive = 0;
		this.initAllList(this.activeitemID);
	},
	onLoad() {
		uni.startPullDownRefresh();
		if (this.findRoute('maintain_home_user_apply_appeal')) {
			this.typeList = [
				{
					name: '报障审批',
					id: 6,
				},
				{
					name: '资料更改',
					id: 0,
				},
				{
					name: '配件申请',
					id: 5,
				},
				{
					name: '保养申诉',
					id: 7,
				}
			];
		} else {
			this.typeList = [
				{
					name: '报障审批',
					id: 6,
				},
				{
					name: '资料更改',
					id: 0,
				},
				{
					name: '配件申请',
					id: 5,
				}
			];
		}
	},
	methods: {
		getActIdx(idx) {
			//  console.log(idx,"索引值");
			this.activeitemindex = idx;
			this.activeitemID = this.typeList[idx].id;
			console.log(this.activeitemID, 888);
			this.statusActive = 0;
			this.params.current = 1;
			this.mylist = [];
			this.initAllList(this.activeitemID);
		},
		onReachBottom() {
			// console.log('下拉加载', this.params.current);
			if (!this.isLoadMore) {
				// 此处判断，上锁，防止重复请求
				this.isLoadMore = true;
				this.params.current += 1;
				this.initAllList(this.activeitemID);
			}
		},
		onPullDownRefresh() {
			this.hanleRefresh();
			setTimeout(function () {
				// 停止下拉刷新动画
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 点击重新加载列表
		hanleRefresh() {
			this.params.current = 1;
			this.mylist = [];
			this.initAllList(this.activeitemID);
		},
		// 获取列表分类
		//  getApproveType() {
		// 	approveType({})
		// 	.then(res=>{
		// 		console.log(res)
		// 		if(res){
		// 			this.typeList=res.data
		// 		}
		// 	})
		// },

		initAllList(ids) {
			let promise;
			var objs = {
				current: this.params.current,
				size: this.params.size,
			};
			if (ids === 0) {
				this.statusList = ['全部', '待审批', '已通过', '未通过'];
				objs.type = this.activeitemID;
				objs.submitId = this.userinfo.user_id;
				if (this.statusActive !== 0) {
					objs.approveStatus = this.statusActive;
				}
				promise = approveList(objs);
			}
			if (ids === 6) {
				this.statusList = ['全部', '待审核', '审核通过', '审核不通过', '已撤回'];
				objs.listType = 1;
				objs.approveStatus = this.statusActive;
				if (this.statusActive === 0) {
					delete objs.approveStatus;
				}
				promise = myApprovalList(objs);
			}
			if (ids === 5) {
				// 配件申请列表
				this.statusList = [
					'全部',
					'审批中',
					// '待处理',
					'审批通过',
					'审批不通过',
					'已撤回',
				];

				if (this.statusActive != 0) {
					// 由于待处理对应后端的退回状态枚举为5，再此处特殊处理
					// (objs.approveStatus = (this.statusActive == 2) ? 5 : this.statusActive == 1 ? 1 : this.statusActive - 1 );
					objs.approveStatus = this.statusActive;
				}
				// if (this.bottomStatus === 1) {
				// 	// 未处理清空筛选
				// 	this.statusList = [];
				// }
				objs.approveUserId = this.userinfo.user_id;
				if (this.statusActive === 0) {
					delete objs.approveStatus;
				}
				objs.dispose = this.bottomStatus;
				promise = partsNewMyList(objs);
			}
			if (ids === 7) {
				this.statusList = ['全部', '待审核', '审核通过', '审核不通过'];
				let obj = {
					appealStatusStr: '2',
					current: this.params.current,
					size: this.params.size,
				};
				if (this.statusActive) {
					obj.appealResultStr = this.statusActive;
				}
				promise = getAppealQuestion(obj);
			}
			if (ids || ids === 0) {
				uni.showLoading({
					title: '加载中',
				});
				this.loadStatus = 'loading';
				promise.then((res) => {
					if (res.code === 200) {
						var obj = res.data || {};
						var arr = res.data.records || [];
						if (Object.keys(obj).length > 0) {
							if (ids === 5) {
								// arr = obj.list.records;
								let auditStatusObj = {
									1: '审批中',
									2: '审批通过',
									3: '审批不通过',
									4: '已撤回',
									5: '已退回',
								};
								for (let i = 0; i < arr.length; i++) {
									arr[i].num = arr[i].partsNum ? arr[i].partsNum : '';
									arr[i].auditStatusName = auditStatusObj[arr[i].approveStatus];
									console.log(arr[i], 'arr[i]');
									if (ids === 5 && arr[i].skuPartsInfo) {
										let skuPartsInfo = arr[i].skuPartsInfo;
										if (arr[i].skuPartsInfo && !Array.isArray(arr[i].skuPartsInfo) && arr[i].skuPartsInfo.skuItemList) {
											skuPartsInfo = arr[i].skuPartsInfo.skuItemList;
										}
										let skuPartsInfoArr = [];
										if (Array.isArray(skuPartsInfo)) {
											skuPartsInfo.forEach(v => {
												if (v.label !== '配件名称') {
													skuPartsInfoArr.push(`${v.label}:${v.value}${v.unitName ? `(${v.unitName})` : ''}`);
												} else {
													arr[i].categoryInfo = v.value;
												}
											});
											arr[i].partsModel = skuPartsInfoArr.join('；');
										}
									}
								}
								// this.pendingNum = obj.todoSize;
								// this.Processed = obj.doneSize;
							}
						}
						this.mylist = this.mylist.concat(arr);
						console.log(this.params, arr, 'eason1212');
						if (arr.length < this.params.size) {
							this.isLoadMore = true;
							this.loadStatus = 'noMore';
						} else {
							this.isLoadMore = false;
						}
						if (this.params.current === 1) {
							// 第一页不显示更多文字
							this.isLoadMore = false;
						} else {
							if (arr.length > this.params.size) {
								this.isLoadMore = true;
							}
						}

						objs = {
							current: this.params.current,
							size: this.params.size,
						};

						uni.hideLoading();
					}
				});
			}
		},
		// 筛选已处理配件列表
		clickPendingNum(num) {
			this.bottomStatus = num;
			this.params.current = 1;
			this.mylist = [];
			this.isPending = true;
			if (num === 2) {
				this.isPending = false;
			}

			this.initAllList(this.activeitemID);
		},
		// 点击分类
		clickitem(res) {
			// console.log(res,"点击的值",this.typeList);
			this.activeitemindex = res.idx;
			this.activeitemID = res.val.id;
			this.statusActive = 0;
			this.params.current = 1;
			this.mylist = [];
			this.initAllList(res.val.id);
		},
		// 点击类型搜索
		changeStatus(idx) {
			this.statusActive = idx;
			this.params.current = 1;
			this.mylist = [];
			this.initAllList(this.activeitemID);
		},

		// 跳维修详情
		toDetail(obj) {
			uni.setStorageSync('elevatorData', '');
			uni.navigateTo({
				url:
					'/subpages/approve/repairDetail?planId=' +
					obj.planId +
					'&elevatorId=' +
					obj.elevatorId +
					'&title=报障审批详情' +
					'&businessApproveId=' +
					obj.businessApproveId
					+ '&myApply=' + (this.userinfo.role_name == 'maintenance' ? 1 : 2),
				fail: (res) => {
					console.log(res);
				}
			});
			// uni.navigateTo({
			// 	url: "/subpages/approve/partApprovalDetail?type=1&id=" + obj.planId
			// })
		},

		// 配件审批
		toPartApprovalDetail(obj) {
			console.log('toPartApprovalDetail', obj);
			uni.navigateTo({
				// url: `/subpages/approve/partApprovalDetail?type=2&id=${obj.planId}&taskId=${obj.taskId}`,
				url: `/subpages/approve/partApprovalDetail?type=2&id=${obj.planId}`,
			});
		},
	},
};
</script>
<style>
page {
	background: #f3f6f8;
}
</style>
<style lang="scss" scoped>
.approve {
	.header {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 300;

		.headerBox {
			margin-left: 20rpx;
			background: #f3f6f8;
		}
	}

	.content {
		padding: 0 20rpx;
		min-height: 900rpx;
		// background: pink;
	}

	.approveStatus {
		// height: 88rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: row;
		// overflow-x: scroll;
		width: 100%;
		white-space: nowrap;
		position: relative;

		.statebg {
			position: fixed;
			right: 0rpx;
			top: 70rpx;
			width: 64rpx;
			height: 80rpx;
			background: linear-gradient(90deg, rgba(243, 246, 248, 0), #f3f6f8);
		}

		.apptop {
			font-size: 26rpx;
			padding: 6rpx 20rpx;
			color: #0091ff;
			margin-right: 15rpx;
			border-radius: 26rpx;
			background-color: #dcf0ff;
		}

		.active {
			color: #fff;
			background-color: #0091ff;
		}
	}

	.emptyData {
		margin: 20rpx auto;
		width: 680rpx;
		text-align: center;
		color: #999999;
	}

	.bottomSelect {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 710rpx;
		height: 70rpx;
		background: #ffffff;
		border-radius: 36rpx;
		display: flex;
		flex-direction: row;
		line-height: 70rpx;
		text-align: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;

		.bottom_L {
			flex: 1;
		}

		.bottom_C {
			height: 50rpx;
			margin-top: 10rpx;
			border-right: 2rpx solid #eeeeee;
		}

		.bottom_R {
			flex: 1;
		}

		.lColor {
			color: #0091ff;
		}
	}

	.bottom {
		height: 100rpx;
	}
}
</style>
